import React, { useState, useEffect } from "react";
import Taro, { getCurrentInstance } from "@tarojs/taro";
import { View, RadioGroup, Radio } from "@tarojs/components";

import api from "@api/api.js";
import Part from "./part";
import { transDate, transDate2 } from "./helper";
import "./index.less";

export default (props) => {
  const types = ["leftTop", "rightTop", "leftBottom", "rightBottom"];
  const [actives, setActives] = useState([]);
  const [type, setType] = useState(""); //判断是否是专家录入
  const [router, setRouter] = useState({});
  const [activeType, setActiveType] = useState("");

  useEffect(() => {
    const params = getCurrentInstance().router.params;
    if (params.tooth) {
      const activeTooth = transDate2(JSON.parse(params.tooth));
      setActives([...activeTooth]);
    }
    setRouter(params);
    params.type && setType(params.type);
  }, []);

  const genertorToothId = (type) => {
    const arr = [];
    for (let index = 0; index < 8; index++) {
      arr.push(type + (index + 1));
    }
    return arr;
  };

  const activeTypeClick = (e) => {
    const value = e.detail.value;
    setActiveType(value);
    let arr = [];
    if (value === "all") {
      types.forEach((item) => {
        arr = [...arr, ...genertorToothId(item)];
      });
    } else if (value === "top") {
      arr = [...arr, ...genertorToothId("leftTop")];
      arr = [...arr, ...genertorToothId("rightTop")];
    } else if (value === "bottom") {
      arr = [...arr, ...genertorToothId("leftBottom")];
      arr = [...arr, ...genertorToothId("rightBottom")];
    }
    setActives(arr);
  };

  // 重新选择
  const reset = () => {
    setActives([]);
    setActiveType("");
  };

  // 下一步
  const submit = async () => {
    const result = transDate(actives);
    const param = {
      clinicId: router.clinicId,
      diagnosisSchemesId: router.id,
      clinicSchemesId: router.clinicSchemesId,
      toothPosition: result,
    };
    const { data, code } = await (type == "expert"
      ? api.saveClinicSchemes(param)
      : api.saveToothPosition(param));
    if (code == 200) {
      // 跳转选择手术
      Taro.navigateTo({
        url: `/pages/select-operation/index?id=${data.clinicSchemesId}&type='plan'`,
      });
    }
  };

  return (
    <View className="selectTooth bgBox">
      <View className="listBox">
        <View className="tool font myRadio">
          <RadioGroup onChange={activeTypeClick}>
            <Radio value="all" checked={activeType == "all"}>
              全选
            </Radio>
            <Radio value="top" checked={activeType == "top"}>
              上半口
            </Radio>
            <Radio value="bottom" checked={activeType == "bottom"}>
              下半口
            </Radio>
          </RadioGroup>
        </View>
        <View onClick={reset} className="selectAgain">
          重新选择
        </View>
        <View className="toothBox">
          {types.map((item) => (
            <Part
              isChild={router.isChild == "true"}
              type={item}
              setActives={setActives}
              actives={actives}
              key={item}
            />
          ))}
        </View>
        <View className="submitBtn">
          <View onClick={submit}>下一步</View>
        </View>
      </View>
    </View>
  );
};
